<template>
  <el-dialog
    draggable
    v-model="dialogVisible"
    :lock-scroll="false"
    :append-to-body="true"
    :modal="false"
    custom-class="cmp-fixed-diagnostis-tips"
    :show-close="false"
    title=""
  >
    <template #title>
      <span class="drag-header-text">
        <span class="title">{{ fixedDiagnostisTipsTitle }}</span>
        <div class="page-info">
          <span
            class="iconv-left"
            @click="changeFixedDiagnostisTipsIdx(fixedDiagnostisTipsIdx - 1)"
          >
            <el-icon><arrow-left /></el-icon>
            <!-- <i class="el-icon-arrow-left"></i> -->
          </span>

          <i>{{ fixedDiagnostisTipsIdx + 1 }} / {{ textContentTips.length }}</i>

          <span
            class="iconv-right"
            @click="changeFixedDiagnostisTipsIdx(fixedDiagnostisTipsIdx + 1)"
          >
            <el-icon><arrow-right /></el-icon>
          </span>
          <span class="iconv-close" @click="closeTips">
            <el-icon :size="25"><close /></el-icon>
          </span>
        </div>
      </span>
    </template>

    <div>
      <ul>
        <li
          v-for="(it, itIdx) in textContentTips[fixedDiagnostisTipsIdx].details"
          :key="itIdx"
        >
          {{ fixedDiagnostisTipsIdx == 1 ? itIdx + 1 + '.' : '' }} {{ it }}
        </li>
      </ul>
    </div>
  </el-dialog>
</template>

<script setup>
  import { onBeforeMount, ref } from 'vue'
  import { ArrowLeft, ArrowRight, Close } from '@element-plus/icons-vue'
  let textContentTipsOriginal = [
    {
      title: '主诉',
      details: [
        '1. 孩子主要有什么不舒服？除了咳嗽，有无气喘？气喘时会从胸部发出“嘿嘿”或“嘶嘶”的高调声音，从鼻子或咽喉部发出的呼吸嘈音通常不是喘音。',
        '2. 咳嗽/咳喘已经有多长时间？现在有咳嗽/咳喘吗？这一次发作多久了？除了这1次，以前有无反复咳嗽/咳喘情况？反反复复有多长时间啦？',
        '3. 以前看病时有无医生说听到孩子有喘音？',
      ],
    },
    {
      title: '反复发作性',
      details: [
        '孩子从什么时候开始出现反复咳嗽/咳喘发作？',
        '到现在孩子已经咳嗽/咳喘几次呢？',
        '过去1年发作过几次？记得每次发作大概在什么月份吗？',
        '过去3个月发作过几次？',
        '每次发作症状迁延大概多久？最短几天？最长几天？',
        '孩子有没有因为比较严重咳喘发作要去急诊或住院治疗？或者门诊医生开激素口服或打激素针？总共有多少次这种比较严重的？过去半年有过几次？',
        '在过去4周或更长时间，是否每周有症状并需要治疗?',
        '过去4周大概有几天有咳嗽/咳喘症状？',
        '过去4周大概有几天因为咳嗽/咳喘需要使用药物治疗的？',
        '最近这一次发作只是咳嗽，还是咳嗽伴有气喘？咳嗽是干咳还是伴有痰音？孩子有没有胸闷、气促等其他症状？',
        '这次发作有无发热？如果有，最高体温多少度？',
        '有无流鼻涕、鼻塞等感冒样症状？',
        '咳喘发作之前有没有吃东西呛过？',
        '有无用过抗菌素治疗？比如，青霉素类（例如阿莫西林）、头孢类（例如希克劳）、阿奇霉素等？',
      ],
    },
    {
      title: '诱因多样性',
      details: [
        '1. 每次发作是不是都先有流涕、喷嚏、鼻塞或者发烧等感冒症状？',
        '2. 有无试过没有感冒的情况下突然出现咳喘症状？',
        // eslint-disable-next-line max-len
        '3. 有没有注意到孩子的咳喘与接触哪些因素有关？比如进食某种食物（包括甜的、冷的）、与动物接触玩耍、闻到很浓的气味（例如：油漆味,、香水味、身边有人抽烟）、或天气转冷时？',
        '4. 孩子在大笑、大叫、哭闹、较剧烈跑跳时会出现咳嗽或气喘吗？',
        '5. 孩子会不会在跑动或玩耍过程中因为咳嗽、气喘或气促被迫停下来？',
        '6. 有无正常上体育课？跑步会不会比大多数同学慢？跑步测验达标吗？',
      ],
    },
    {
      title: '时间节律性',
      details: [
        '1. 咳喘症状会不会早上起床时或晚上尤其是睡着后好发或加重？',
        '2. 孩子会不会在夜睡过程中因为咳嗽、气喘、或“喘不过气来”而醒来？',
      ],
    },
    {
      title: '季节性',
      details: [
        '孩子的咳喘会不会在某个季节容易发病或更加严重（如秋冬季、春季）？',
      ],
    },
    {
      title: '可逆性',
      details: [
        '1. 孩子有咳嗽/咳喘症状的时候通常使用什么药物治疗？有无做过雾化治疗？',
        // eslint-disable-next-line max-len
        '1.1. 知道具体用过什么药物吗？有无雾化过激素类药物（例如：布地奈德、丙酸氟替卡松、二丙酸倍氯米松）？有无雾化过支气管扩张剂（例如：沙丁胺醇、特布他林、爱全乐、可必特）？',
        '1.2. 一般雾化会坚持做多长时间？症状好了就停药，还是无症状也坚持用药？最长用了多长时间？（或者至今已用了多长时间？）',
        '1.3. 你觉得做雾化有效吗？',
        '2.孩子有吸过气雾剂或干粉剂治疗吗？',
        // eslint-disable-next-line max-len
        '2.1. 用过哪种气雾剂或干粉剂？例如：橙色的或咖啡色的气雾剂（丙酸氟替卡松、布地奈德）；蓝色的气雾剂（沙丁胺醇、特布他林）？红色的或紫色的干粉剂（信必可都保、舒利迭干粉剂）？',
        '2.2. 孩子用这种气雾剂（干粉剂）多长时间了？',
        '2.3. 你觉得孩子吸这些药有效吗？',
        '3.孩子有口服过白三烯受体拮抗剂（例如：顺尔宁）治疗吗？',
        '3.1. 最长用了多久？',
        '3.2. 你觉得孩子吃这种药有效吗？',
        '4. 两次咳嗽/咳喘发作之间会不会有一段时间完全无症状的？',
      ],
    },
    {
      title: '既往史',
      details: [
        '1. 孩子以前有没有患过什么疾病？有没有因为比较严重的肺炎需要住院治疗？',
        '2. 孩子会不会吃什么药物或食物过敏？比如：吃牛奶、鸡蛋、虾、蟹等后出皮疹、咳嗽、气喘，或腹痛腹泻？',
        '3. 孩子会不会闻到某种气味、进入阴暗潮湿房间或铺地毯的房间、或者与宠物玩耍时出现咳喘？',
        '4. 孩子患过湿疹（即是奶藓）吗？或者有无经常出皮疹？有无去看过医生，医生说是湿疹吗？',
        '5. 孩子有没有经常流清鼻涕、阵发性连续多个喷嚏、鼻塞、揉眼睛揉鼻子？ 以前有没有医生告诉过你孩子有“过敏性鼻炎”？',
        '6. 孩子睡眠时会不会经常鼻塞、打呼噜、张开嘴巴呼吸？',
        '7. 孩子有没有做过过敏原检查？查到哪一些过敏原过敏？',
      ],
    },
    // {
    //   title: '个人史',
    //   details: [
    //     '1. 孩子以前有没有患过什么疾病？有没有因为比较严重的肺炎需要住院治疗？',
    //     '2. 孩子会不会吃什么药物或食物过敏？比如：吃牛奶、鸡蛋、虾、蟹等后出皮疹、咳嗽、气喘，或腹痛腹泻？',
    //     '3. 孩子会不会闻到某种气味、进入阴暗潮湿房间或铺地毯的房间、或者与宠物玩耍时出现咳喘？',
    //     '4. 孩子患过湿疹（即是奶藓）吗？或者有无经常出皮疹？有无去看过医生，医生说是湿疹吗？',
    //     '5. 孩子有没有经常流清鼻涕、阵发性连续多个喷嚏、鼻塞、揉眼睛揉鼻子？ 以前有没有医生告诉过你孩子有“过敏性鼻炎”？',
    //     '6. 孩子睡眠时会不会经常鼻塞、打呼噜、张开嘴巴呼吸？',
    //     '7. 孩子有没有做过过敏原检查？查到哪一些过敏原过敏？'
    //   ]
    // },
    {
      title: '过敏性疾病家族史',
      details: [
        // eslint-disable-next-line max-len
        '1. 家里有没有其他人患有哮喘、过敏性鼻炎、皮肤过敏、食物过敏的？包括爸爸、妈妈、兄弟姐妹，还有爷爷、奶奶、外公、外婆等有血缘关系的家族成员。家里哪一位有过敏？具体是哪一种过敏？（有过敏史的具体家庭成员）有没有做过过敏原检查证实哪种过敏原过敏？',
        '2. 家里有没有人吸烟的？',
      ],
    },
  ]

  const fixedDiagnostisTipsTitle = ref(textContentTipsOriginal[0].title)
  const fixedDiagnostisTipsDetails = ref(textContentTipsOriginal[0].details)
  const changeFixedDiagnostisTipsIdx = (idx) => {
    // console.log('click changeFixedDiagnostisTipsIdx')
    if (idx < textContentTipsOriginal.length && idx >= 0) {
      fixedDiagnostisTipsIdx.value = idx

      fixedDiagnostisTipsTitle.value =
        textContentTipsOriginal[fixedDiagnostisTipsIdx.value].title
      fixedDiagnostisTipsDetails.value =
        textContentTipsOriginal[fixedDiagnostisTipsIdx.value].title
    }
  }

  const fixedDiagnostisTipsIdx = ref(0)

  const dialogVisible = ref(false)
  const closeTips = function () {
    dialogVisible.value = false
  }
  const textContentTips = JSON.parse(JSON.stringify(textContentTipsOriginal))

  const initTitle = (isShow, title) => {
    // 外部传入文字 内部匹配到index
    console.log('title =' + title)
    textContentTipsOriginal.forEach((item, index) => {
      if (title === item.title) {
        fixedDiagnostisTipsIdx.value = index
        changeFixedDiagnostisTipsIdx(index)
        dialogVisible.value = isShow
      }
    })
  }
  defineExpose({
    initTitle,
  })
</script>
<style lang="scss">
  .el-dialog.cmp-fixed-diagnostis-tips {
    user-select: none;
    overflow: hidden;
    position: static !important;

    width: 620px;
    height: 256px;
    position: fixed;
    margin-top: 20px !important;
    margin-bottom: 0;
    z-index: 2200;

    .el-dialog__headerbtn {
      top: 0px;
      // top: 15px;
    }

    .el-dialog__header {
      padding: 10px 20px;
      background-color: #514c4c;
      margin-right: 0px;
      position: relative;
      .iconv-close {
        position: absolute;
        right: 5px;
        top: 5px;
      }
      .iconv-close:hover {
        cursor: pointer;
      }
      .drag-header-text {
        color: #fff;

        .title {
          width: 150px;
          display: inline-block;
          font-weight: bold;
        }

        .page-info {
          margin: 0;
          display: inline-block;
          user-select: none;

          i {
            font-style: normal;
          }

          .iconv-left,
          .iconv-right {
            margin: 0 12px;
            display: inline-block;
            width: 28px;
            height: 28px;
            box-sizing: border-box;
            padding: 5px;
            border-radius: 20px;
            cursor: pointer;

            &:hover {
              i {
                color: #409eff;
                // @primary: #409eff;
              }
            }
          }

          .iconv-left {
            margin-left: 0;
          }
        }
      }
    }

    .el-dialog__body {
      padding: 0 8px 12px;
      height: 160px;
      overflow: auto;
    }
    ul {
      padding: 0 4px 0 12px;
      line-height: 1.5;

      li {
        list-style: none;
        margin: 6px 0;
      }
    }
  }
</style>
